<?php
/**
 * 博客精选文章组件
 * 用于展示博客中的精选文章
 */
$configKey = isset($configKey) ? $configKey : 'blog-featured';
// 从页面配置获取博客精选文章组件配置，使用默认值作为后备
$data = array_merge([
    'section_id' => 'blog-featured',
    'section_pretitle' => '精选文章',
    'section_title' => '精选文章',
    'section_subtitle' => '精选文章',
    'icon' => 'fa-star',
    'border_radius' => 'xl',
    'shadow' => 'md',
    'hover_effect' => 'blog-card-hover',
    'items' => [
        [
            'id' => 1,
            'title' => '2023年前端开发趋势与最佳实践',
            'excerpt' => '探索2023年影响前端开发的关键技术趋势，包括框架选择、性能优化和用户体验设计的最佳实践...',
            'category' => 'web-dev',
            'category_name' => '网页开发',
            'author' => [
                'name' => '张明',
                'avatar' => 'https://picsum.photos/seed/author1/100/100'
            ],
            'date' => '2023-06-15',
            'read_time' => '8 分钟',
            'image' => 'https://picsum.photos/seed/blog1/800/500',
            'image_alt' => '前端开发代码编辑器界面',
            'comments' => 24
        ]
    ],
    'grid_cols' => 'grid-cols-1 md:grid-cols-2',
    'grid_gap' => '8',
    'margin_bottom' => '16',
    'title_margin_bottom' => '8'
], $pageConfig['components'][$configKey] ?? []);

$currentCategory = isset($_GET['category']) ? '?category=' . $_GET['category'] : '';
?>

<!-- 精选文章 -->
<?php if (!empty($data['items'])): ?>
    <div id="<?= $data['section_id'] ?>" class="mb-<?= $data['margin_bottom'] ?>">
        <h2 class="text-2xl font-bold mb-<?= $data['title_margin_bottom'] ?> flex items-center">
            <span class="border-2 border-blue-500 text-blue-500 p-2 rounded-lg mr-3">
                <i class="fa <?= $data['icon'] ?>"></i>
            </span>
            <?= $data['section_title'] ?>
        </h2>
        
        <div class="grid <?= $data['grid_cols'] ?> gap-<?= $data['grid_gap'] ?>">
            <?php foreach ($data['items'] as $post): ?>
                <article class="rounded-<?= $data['border_radius'] ?> overflow-hidden shadow-<?= $data['shadow'] ?> <?= $data['hover_effect'] ?>">
                    <a href="/blog/<?= $post['id'] ?><?= $currentCategory ?>" class="block">
                        <div class="relative h-48 overflow-hidden">
                            <img 
                                src="<?= htmlspecialchars($post['image']) ?>" 
                                alt="<?= htmlspecialchars($post['image_alt']) ?>"
                                class="w-full h-full object-cover transition-transform duration-500 hover:scale-110"
                            >
                            <div class="absolute top-4 left-4">
                                <span class="tag-pill text-blue-600 border-2 border-blue-100">
                                    <?= htmlspecialchars($post['category_name']) ?>
                                </span>
                            </div>
                        </div>
                        
                        <div class="p-6">
                            <h3 class="text-xl font-bold mb-3 line-clamp-2 hover:text-primary transition-colors">
                                <?= htmlspecialchars($post['title']) ?>
                            </h3>
                            
                            <p class="text-gray-600 mb-4 line-clamp-3">
                                <?= htmlspecialchars($post['excerpt']) ?>
                            </p>
                            
                            <div class="flex justify-between items-center">
                                <div class="flex items-center">
                                    <img 
                                        src="<?= htmlspecialchars($post['author']['avatar']) ?>" 
                                        alt="<?= htmlspecialchars($post['author']['name']) ?>"
                                        class="w-8 h-8 rounded-full mr-2 object-cover"
                                    >
                                    <span class="text-sm text-gray-700">
                                        <?= htmlspecialchars($post['author']['name']) ?>
                                    </span>
                                </div>
                                
                                <div class="flex items-center text-sm text-gray-500">
                                    <span class="flex items-center mr-3">
                                        <i class="fa fa-calendar-o mr-1"></i>
                                        <?= htmlspecialchars(date('M d, Y', strtotime($post['date']))) ?>
                                    </span>
                                    <span class="flex items-center">
                                        <i class="fa fa-clock-o mr-1"></i>
                                        <?= htmlspecialchars($post['read_time']) ?>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </a>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
<?php endif; ?>